<template>
	<view class="chat">
		<view class="message-list">
			<chat-message
				:list="chatRecord"
				:receive='receiveUserInfo'
				:user="userInfo"
				></chat-message>
			<view id="message-end" style="height:100rpx;">
			</view>
			<view v-show='op.isEmoji||op.isTools' style="height:400rpx;">	
			</view>
		</view>
		<view class="chat-foot">
			<view class="opbar">
				<view class="main">
					<view class="icon">
						<u-icon name="volume"  v-show="!op.isMicrophone" size="36" @click='showMicrophone'></u-icon>
						<u-icon name="edit-pen"  v-show="op.isMicrophone"  size="36"  @click='hideMicrophone'></u-icon>
					</view>
					<view class="input">
						<!-- #ifdef H5 || MP-ALIPAY  -->
						<u-button fill round v-show="op.isMicrophone">无法使用录音</u-button>
						<!-- #endif -->
						<!-- #ifndef H5 || MP-ALIPAY  -->
						<button 
							class="voice-button"
							@touchstart="voiceBegin" 
							@touchmove.stop.prevent="voiceIng" 
							@touchend="voiceEnd" 
							@touchcancel="voiceCancel"
							 v-show="op.isMicrophone">
							{{voiceTis||'按住 说话'}}
							</button>
						<!-- #endif -->
						<textarea
							 v-show="!op.isMicrophone"
							class="message-textarea " 
							auto-height="true"
							:maxlength='-1'
							:value="message"  
							:cursor="cursor"  
							@blur='textareaBlurEvent'
							@input="textareaInputEvent">
						</textarea>
						
					</view>
					<view class="icon">
						<u-icon name="edit-pen" size="36" @click="hideEmoji" v-show="op.isEmoji"></u-icon>
						<u-icon name="chat" size="36" @click="showEmoji" v-show="!op.isEmoji"></u-icon>
					</view>
					<view class="icon">
						<view v-show="!hasMeaage">
							<u-icon
								name="more-circle"  
								size="36"
								v-show="!op.isTools"
								@click="showTools" ></u-icon>
							<u-icon
								name="arrow-up"  
								size="36"
								v-show="op.isTools"
								@click="hideTools" ></u-icon>
						</view>
						
						<u-button  @click="sendMeaage"  class ='send-message' v-show="hasMeaage">发送</u-button>
					
					</view>
				</view>
				
				<view class="append">
					<chat-tools @upload='uploadFile' :visible="op.isTools"></chat-tools>
					<chat-emoji @check-emoji='checkEmoji' :visible="op.isEmoji"></chat-emoji>
				</view>
			</view>
		</view>
		
		<!-- 录音UI效果 -->
		<!-- #ifndef H5 || MP-ALIPAY -->
		<view class="record" v-show = "recording"  :class="recording?'':'hidden'">
			<view class="ing"  :class="willStop?'hidden':''" >
				 <u-icon name="chat" size="136" ></u-icon>
			</view>
			
			<view class="cancel" :class="willStop?'':'hidden'" >
				<u-icon name="more-circle" size="136" ></u-icon>
			</view>
			<view class="tis" :class="willStop?'change':''">
				<view style="text-align: center;">
					<view>
						{{recordTis}}
					</view>
					<view>
						已录音{{recordLength}}秒
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import ChatBase from '@/common/mixins/chat_base.js'
	import ChatMixin from '@/common/mixins/chat_mixin.js'
	// #ifndef H5
	import ChatVoice from '@/common/mixins/chat_voice.js'
	// #endif	
	import ChatTools from '@/components/chat/tools';
	import ChatMessage from '@/components/chat/message';
	import ChatEmoji from '@/components/chat/emoji';
	export default {
		// #ifdef H5
		mixins: [ ChatMixin,ChatBase,],
		// #endif
		// #ifndef H5
		mixins: [ ChatMixin, ChatVoice,ChatBase,],
		// #endif
		components:{
			ChatEmoji,ChatTools,ChatMessage
		},
		data() {
			return {
				op: {
					isMicrophone: false,
					isEmoji: false,
					isTools: false,
					scrollTop: 0,
				},
				hasMeaage:false
			};
		},
		onPageScroll(e) {

		},

		methods: {
			textareaInputEvent(event){
				this.hasMeaage= event.detail.value.length>0
			},
			//显示语音输入
			showMicrophone() {
				
				this.op.isMicrophone = true;
				this.hideTools();
				this.hideEmoji();
				this.scrollToBottom();
			},
			//隐藏语音输入
			hideMicrophone() {
				this.op.isMicrophone = false;
			},
			//显示表情输入
			showEmoji() {
				this.op.isEmoji = true;
				this.hideTools();
				this.hideMicrophone();
				this.scrollToBottom();
			},
			//隐藏表情输入
			hideEmoji() {
				this.op.isEmoji = false;
			},
			//显示功能框
			showTools() {
				this.op.isTools = true;
				this.hideEmoji();
				this.hideMicrophone();
				this.scrollToBottom();
			},
			//隐藏功能框
			hideTools() {
				this.op.isTools = false;
			},
			//下滑到底
			scrollToBottom() {
				setTimeout(()=>{
					uni.pageScrollTo({
						 scrollTop: 1000000,
					})
				},300)
			},
			toDetail() {
				// uni.navigateTo({
				// 	url: '/pages/chat/detail'
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
.hidden{
	display:none!important;
}
.record{
	width: 40vw;
	height: 40vw;
	position: fixed;
	top: 55%;
	left: 30%;
	background-color: rgba(0,0,0,.6);
	border-radius: 20upx;
	
	.ing{
		width: 100%;
		height: 30vw;
		display: flex;
		justify-content: center;
		align-items: center;
		// 模拟录音音效动画
		@keyframes volatility {
			0% {background-position: 0% 130%;}
			20% {background-position: 0% 150%;}
			30% {background-position: 0% 155%;}
			40% {background-position: 0% 150%;}
			50% {background-position: 0% 145%;}
			70% {background-position: 0% 150%;}
			80% {background-position: 0% 155%;}
			90% {background-position: 0% 140%;}
			100% {background-position: 0% 135%;}
		}
		.icon{
			background-image:linear-gradient(to bottom,#8ef0bc,#fff 50%); 
			background-size:100% 200%;
			animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
			-webkit-background-clip:text; 
			-webkit-text-fill-color:transparent; 
			font-size: 150upx;
			color: #f09b37;
		}
	}
	.cancel{
		width: 100%;
		height: 30vw;
		display: flex;
		justify-content: center;
		align-items: center;
		.icon{
			color: #fff;
			font-size: 150upx;
		}
	}
	.tis{
		width: 100%;
		height: 10vw;
		display: flex;
		justify-content: center;
		font-size: 28upx;
		color: #fff;
		&.change{
			color: #f09b37;
		}
	}
}
.chat-foot{
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
	position: fixed;
	bottom:0px;
	.opbar {
		flex-shrink: 0;
		z-index: 9;
		background-color: #fff;
		border-top: 1rpx solid #f7f7f7;
	
		.main {
			display: flex;
			align-items: center;
			//height: 100rpx;
	
			.icon {
				//height: 80rpx;
				width: 80rpx;
				line-height: 80rpx;
				text-align: center;
				flex-shrink: 0;
			}
	
			.input {
				flex: 1;
				.voice-button{
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					flex-shrink: 0;
				}
				.message-textarea{
					margin: 10rpx 0;
					padding: 10rpx;
					width: 100%;
					border: 1px solid #dcdfe6;
				}
			}
		}
	}
}
</style>
